export const INDEX_TEMPLATE = `
<template>
    <div class="app-container">
        <div>
            <!-- 表单 -->
            <el-form :inline="true" :model="formData" ref="formDataRef" class="demo-form-inline">#{formHtml}
                <el-form-item>
                    #{addBtnHtml}
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="序号" width="95">
                <template slot-scope="scope">
                    {{ scope.$index }}
                </template>
            </el-table-column>#{tableHtml}
            <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                    #{editBtnHtml}
                    <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paging.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="paging.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paging.total">
            </el-pagination>
        </div>
        #{editHtml}
    </div>
</template>

<script>
import { basicRequest } from '@/api/basics'
#{editImport}
export default {
    #{editRegister}
    data() {
        return {
            list: [], // 表格数据
            paging: {
                total: 0, // 总条数
                page: 1, // 当前页
                limit: 10 // 每页条数
            },
            formData: { #{formData}
            }, // 表单数据
            listLoading: true, // 加载状态
        }
    },
    mounted() {
        // 页面加载时获取数据
        this.getList()
    },
    methods: {
        #{editInitFnJs}
        onSubmit() {
            // 查询按钮点击事件，重置页码并获取数据
            this.paging.page = 1
            this.getList()
        },
        resetForm() {
            // 重置按钮点击事件，重置表单并获取数据
            this.$refs.formDataRef.resetFields()
            this.onSubmit()
        },
        handleSizeChange(val) {
            // 每页条数改变事件，改变每页条数并获取数据
            this.paging.limit = val
            this.getList()
        },
        handleCurrentChange(val) {
            // 当前页改变事件，改变当前页并获取数据
            this.paging.page = val
            this.getList()
        },
        handleDelete(row) {
            // 删除按钮点击事件，弹出确认框，确认后调用删除接口
            this.$confirm('是否确定删除该行?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                basicRequest({
                    id: row.id
                }, {}, '#{delUrl}', '#{delMethod}').then(response => {
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                    this.resetForm()
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }, 
        getList() {
            // 获取数据方法，根据当前页和每页条数获取数据
            this.listLoading = true
            basicRequest({
                ...this.paging,
                ...this.formData
            }, {}, '#{listUrl}', '#{listMethod}').then(response => {
                this.list = response.data.items
                this.paging.total = response.data.total
                this.listLoading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
`

export const EDIT_TEMPLATE = `
<template>
    <el-dialog :title="formData.id ? '编辑' : '新增'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div>
            <el-form :model="formData" ref="form" :rules="rules" label-width="100px">#{formHtml}
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { basicRequest } from '@/api/basics'
export default {
    data() {
        return {
            dialogVisible: false,
            formData: { #{formData}
            },
            rules: { #{formRules}
            },
        }
    },
    methods: {
        init(row) {
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs.form.resetFields()
                this.formData.id = row.id || ''
                
                if(row.id) {
                    this.getFormData()
                }
            })
        },
        getFormData() {
            basicRequest({ id: this.formData.id }, {}, '#{infoUrl}', '#{infoMethod}').then(res => {
                this.formData = res.data;
            })
        },
        handleClose() {
            this.$refs.form.resetFields();

            this.$nextTick(() => {
                this.dialogVisible = false;
            })
        },
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const url = this.formData.id ? '#{editUrl}' : '#{addUrl}'
                    const method = this.formData.id ? '#{editMethod}' : '#{addMethod}'
                    basicRequest(this.formData, {}, url, method).then(res => {
                        this.$message.success('操作成功')
                        this.$emit('refresh')
                        this.handleClose()
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            });
        },
    }
}
</script>
`

export const PAGECONFIG_TEMPLATE = `export default { 
    hidden: #{hidden}, 
    title: '#{title}', 
    icon: '#{icon}',
}
`

export const FORM_ITEM_TEMPLATE = `
                <el-form-item label="#{label}" prop="#{prop}">
                    <el-input v-model="formData.#{prop}" placeholder="请输入#{label}"></el-input>
                </el-form-item>`

export const TABLE_ITEM_TEMPLATE = `
            <el-table-column prop="#{prop}" label="#{label}"></el-table-column>`

export const FORM_DATA_TEMPLATE = `
                #{prop}: '',`

export const RULES_TEMPLATE = `
                #{prop}: [{ required: true, message: '请输入#{label}', trigger: 'blur' }],`  

export const EDIT_OUTER_TEMPLATES = {
    POSSESS: {
        editImport: `import Form from './form.vue'`,
        editRegister: `components: { Form },`,
        editHtml: `<Form ref="formRef" @refresh="resetForm"/>`,
        addBtnHtml: `<el-button type="primary" @click="handleEdit({})">新增</el-button>`,
        editBtnHtml: `<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>`,
        editInitFnJs: `handleEdit(row) { this.$refs.formRef.init(row) },`,
    },
    WITHOUT: {
        editImport: '',
        editRegister: '',
        editHtml: '',
        addBtnHtml: '',
        editBtnHtml: '',
        editInitFnJs: ''
    }
}

export const JSON_TEMPLATE = [
    {
        "label": "姓名",
        "prop": "name"
    },
    {
        "label": "年龄",
        "prop": "age"
    },
    {
        "label": "地址",
        "prop": "address"
    }
]